<template>
  <div>
    <el-container>
      <el-header>
        <el-row :gutter="0" type="flex" justify="center" align="middle">
          <el-col :xs="12" :sm="12" :md="16" :lg="18" :xl="18">
            <div class="header-logo">ITMENTU</div>
            <div class="header-menu">
              <ul class="hidden-sm-and-down menu">
                <li>
                  <nuxt-link class="active" to="/">首页</nuxt-link>
                </li>
                <li>
                  <nuxt-link to="/">HarmonyOS</nuxt-link>
                </li>
                <li>
                  <nuxt-link to="/">Java</nuxt-link>
                </li>
                <li>
                  <nuxt-link to="/">数据库</nuxt-link>
                </li>
                <li>
                  <nuxt-link to="/">简历</nuxt-link>
                </li>
                <li>
                  <nuxt-link to="/">HTML编辑器</nuxt-link>
                </li>
              </ul>
            </div>
          </el-col>
          <el-col class="search-box" :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form class="hidden-sm-and-down" :inline="true">
              <el-form-item class="keywords">
                <el-input placeholder="搜索数据" suffix-icon="el-icon-search"></el-input>
              </el-form-item>
              <el-avatar
                class="hidden-sm-and-down"
                :size="40"
                src="https://itmentu.oss-cn-shenzhen.aliyuncs.com/itmentu/3ea6beec64369c2642b92c6726f1epng.png"
              ></el-avatar>
            </el-form>
            <i class="hidden-md-and-up el-icon-menu mobile-menu-btn" />
          </el-col>
        </el-row>
      </el-header>
    </el-container>
    <el-main>
      <nuxt />
      <el-footer>
        <el-row :gutter="0" justify="center" type="flex" align="middle">
          <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18">
            <el-row :gutter="0" type="flex" justify="center" align="middle">
              <el-col class="hidden-xs-only acenter" :sm="4" :md="12" :lg="12" :xl="12">
                <div class="text item">
                  <img src="~/assets/pic/logo.png" />
                </div>
                <div>IT门徒，一个完全开放、免费的IT知识分享社区</div>
              </el-col>
              <el-col class="acenter" :xs="12" :sm="10" :md="6" :lg="6" :xl="6">
                <el-card shadow="never">
                  <img src="~/assets/pic/ewm.jpg" width="80%" class="image">
                  <div style="padding: 14px;">
                    <span>扫码关注获取资源</span>
                  </div>
                </el-card>
              </el-col>
              <el-col class="acenter" :xs="12" :sm="10" :md="6" :lg="6" :xl="6">
                <el-card shadow="never">
                  <img src="~/assets/pic/ewm.jpg" width="80%" class="image">
                  <div style="padding: 14px;">
                    <span>在线咨询</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-footer>
    </el-main>
  </div>
</template>
<script>
export default {};
</script>
<style>
body {
  margin: 0px !important;
}
.el-main {
  width: 100%;
  overflow-y: hidden;
}
.ml200 {
  padding-left: 200px;
}
.header-logo {
  width: 91px;
  float: left;
  height: 56px;
  line-height: 44px;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}
.header-menu {
  height: 56px;
  line-height: 23px;
  flex-grow: 0;
  padding: 0;
  overflow-y: visible;
  left: 0px;
}
.header-menu li > a {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
}
.header-menu li a.active {
  color: #fff;
}
.el-header {
  position: fixed;
  height: 56px !important;
  width: 100%;
  background: #7952b3;
  z-index: 12;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
}
.el-header .menu {
  list-style: none;
}
.el-header .menu li {
  float: left;
}
.el-main {
  position: absolute;
  top: 56px;
  padding: 0 0 !important;
}
.search-box {
  text-align: right;
  height: 56px;
}
.search-box .keywords {
  margin-right: 20px !important;
}
.search-box .keywords .el-input__inner {
  height: 38px;
  width: 204px;
}
.search-box .el-form {
  height: 56px;
}
.search-btn-box {
  width: 40px;
  height: 38px;
  margin-right: 0px !important;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 5px;
}
.search-btn {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.mobile-menu-btn {
  font-size: 46px;
  color: #fff;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .el-main {
    padding: 5px;
  }
}
.el-footer{
  background: #F4F5F7;
  height: auto !important;
  margin-top: 50px;
  padding-top: 30px;
  padding-bottom: 30px;
  /* margin-left: -20px;
  margin-right: -20px;
  margin-bottom: -50px !important;
  padding: 0 0 !important; */
}
.el-card{
  background: none !important;
  border: 0px !important;
}
</style>